<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1.讲解v-text 和 v-html指令
            2.对比 {{  }} v-text  v-html

            v-html 能够解析标签,其他两个不能
            {{ }}闪屏效果
            v-text 白屏
        -->
        <!-- 1.{{  }} -->
        <div>num:{{ num }} </div>
        <div>str:{{ str }} </div>
        <!-- 2.v-text -->
        <div v-text = 'num'></div>
        <div v-text = 'str'></div>
        <!-- 3.v-html -->
        <div v-html = 'num'></div>
        <div v-html = 'str'></div>
        
    </div>
</body>
    <script>
        new Vue({
            el:'#app',
            data:{
                num:10,
                str:'<h3>我是h3标签</h3>'
            }
        })
    </script>
</html>